<template>
  <div class="colonies-view">
    <div class="colonies-header">
      <div class="view-title">
        <h1 class="title">
          <span class="title-icon">🌍</span>
          殖民地管理
        </h1>
        <p class="subtitle">管理你的星球殖民地和资源开发</p>
      </div>
      
      <div class="colonies-controls">
        <div class="view-filters">
          <select v-model="selectedFilter" class="filter-select">
            <option value="all">所有殖民地</option>
            <option value="developing">发展中</option>
            <option value="established">已建成</option>
            <option value="struggling">困难中</option>
          </select>
          
          <select v-model="sortBy" class="sort-select">
            <option value="name">按名称排序</option>
            <option value="population">按人口排序</option>
            <option value="development">按发展度排序</option>
            <option value="resources">按资源产出排序</option>
          </select>
        </div>
        
        <button @click="establishNewColony" class="establish-btn">
          <span class="btn-icon">🚀</span>
          建立新殖民地
        </button>
      </div>
    </div>
    
    <div class="colonies-content">
      <div class="colonies-overview">
        <div class="overview-stats">
          <div class="stat-card">
            <div class="stat-icon">🌍</div>
            <div class="stat-info">
              <div class="stat-value">{{ totalColonies }}</div>
              <div class="stat-label">总殖民地</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(totalPopulation) }}</div>
              <div class="stat-label">总人口</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">📈</div>
            <div class="stat-info">
              <div class="stat-value">{{ averageDevelopment }}%</div>
              <div class="stat-label">平均发展度</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">⚡</div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(totalEnergyOutput) }}</div>
              <div class="stat-label">总能源产出</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="colonies-grid">
        <div 
          v-for="colony in filteredColonies" 
          :key="colony.id"
          class="colony-card"
          :class="[`status-${colony.status}`, { selected: selectedColony?.id === colony.id }]"
          @click="selectColony(colony)"
        >
          <div class="colony-header">
            <div class="colony-info">
              <h3 class="colony-name">{{ colony.name }}</h3>
              <div class="colony-meta">
                <span class="colony-type">{{ colony.planetType }}</span>
                <span class="colony-system">{{ colony.systemName }}</span>
              </div>
            </div>
            
            <div class="colony-status">
              <div class="status-indicator" :class="`status-${colony.status}`">
                {{ getStatusIcon(colony.status) }}
              </div>
            </div>
          </div>
          
          <div class="colony-stats">
            <div class="stat-row">
              <div class="stat-item">
                <span class="stat-icon">👥</span>
                <span class="stat-text">{{ formatNumber(colony.population) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-icon">📊</span>
                <span class="stat-text">{{ colony.development }}%</span>
              </div>
            </div>
            
            <div class="stat-row">
              <div class="stat-item">
                <span class="stat-icon">🏭</span>
                <span class="stat-text">{{ colony.buildings.length }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-icon">⚡</span>
                <span class="stat-text">{{ formatNumber(colony.energyOutput) }}</span>
              </div>
            </div>
          </div>
          
          <div class="colony-resources">
            <div class="resource-bar">
              <div class="resource-item" v-for="resource in colony.resources" :key="resource.type">
                <span class="resource-icon">{{ getResourceIcon(resource.type) }}</span>
                <div class="resource-progress">
                  <div 
                    class="resource-fill" 
                    :style="{ width: `${(resource.current / resource.max) * 100}%` }"
                  ></div>
                </div>
                <span class="resource-text">{{ resource.current }}/{{ resource.max }}</span>
              </div>
            </div>
          </div>
          
          <div class="colony-actions">
            <button @click.stop="manageColony(colony)" class="action-btn primary">
              <span class="btn-icon">⚙️</span>
              管理
            </button>
            <button @click.stop="viewColonyDetails(colony)" class="action-btn">
              <span class="btn-icon">📊</span>
              详情
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 殖民地详情面板 -->
    <div v-if="selectedColony" class="colony-details-panel">
      <div class="panel-header">
        <h2 class="panel-title">{{ selectedColony.name }}</h2>
        <button @click="closeDetails" class="close-btn">✕</button>
      </div>
      
      <div class="panel-content">
        <div class="details-tabs">
          <button 
            v-for="tab in detailTabs" 
            :key="tab.id"
            @click="activeDetailTab = tab.id"
            class="tab-btn"
            :class="{ active: activeDetailTab === tab.id }"
          >
            <span class="tab-icon">{{ tab.icon }}</span>
            {{ tab.name }}
          </button>
        </div>
        
        <div class="tab-content">
          <!-- 概览标签 -->
          <div v-if="activeDetailTab === 'overview'" class="tab-panel">
            <div class="overview-grid">
              <div class="overview-section">
                <h4 class="section-title">基本信息</h4>
                <div class="info-list">
                  <div class="info-item">
                    <span class="info-label">星球类型:</span>
                    <span class="info-value">{{ selectedColony.planetType }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">大气成分:</span>
                    <span class="info-value">{{ selectedColony.atmosphere }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">重力:</span>
                    <span class="info-value">{{ selectedColony.gravity }}G</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">温度:</span>
                    <span class="info-value">{{ selectedColony.temperature }}°C</span>
                  </div>
                </div>
              </div>
              
              <div class="overview-section">
                <h4 class="section-title">发展状况</h4>
                <div class="development-progress">
                  <div class="progress-bar">
                    <div 
                      class="progress-fill" 
                      :style="{ width: `${selectedColony.development}%` }"
                    ></div>
                  </div>
                  <span class="progress-text">{{ selectedColony.development }}%</span>
                </div>
                
                <div class="development-factors">
                  <div class="factor-item">
                    <span class="factor-label">人口增长:</span>
                    <span class="factor-value positive">+{{ selectedColony.populationGrowth }}%</span>
                  </div>
                  <div class="factor-item">
                    <span class="factor-label">幸福度:</span>
                    <span class="factor-value">{{ selectedColony.happiness }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 建筑标签 -->
          <div v-if="activeDetailTab === 'buildings'" class="tab-panel">
            <div class="buildings-grid">
              <div 
                v-for="building in selectedColony.buildings" 
                :key="building.id"
                class="building-card"
              >
                <div class="building-icon">{{ building.icon }}</div>
                <div class="building-info">
                  <div class="building-name">{{ building.name }}</div>
                  <div class="building-level">等级 {{ building.level }}</div>
                </div>
                <div class="building-output">
                  <div class="output-item" v-for="output in building.outputs" :key="output.type">
                    <span class="output-icon">{{ getResourceIcon(output.type) }}</span>
                    <span class="output-value">+{{ output.amount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 资源标签 -->
          <div v-if="activeDetailTab === 'resources'" class="tab-panel">
            <div class="resources-overview">
              <div 
                v-for="resource in selectedColony.resources" 
                :key="resource.type"
                class="resource-detail"
              >
                <div class="resource-header">
                  <span class="resource-icon">{{ getResourceIcon(resource.type) }}</span>
                  <span class="resource-name">{{ getResourceName(resource.type) }}</span>
                </div>
                
                <div class="resource-stats">
                  <div class="resource-bar-large">
                    <div 
                      class="resource-fill" 
                      :style="{ width: `${(resource.current / resource.max) * 100}%` }"
                    ></div>
                  </div>
                  <div class="resource-numbers">
                    <span class="current">{{ formatNumber(resource.current) }}</span>
                    <span class="separator">/</span>
                    <span class="max">{{ formatNumber(resource.max) }}</span>
                  </div>
                </div>
                
                <div class="resource-production">
                  <span class="production-label">产出:</span>
                  <span class="production-value">+{{ formatNumber(resource.production) }}/小时</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Resource {
  type: string
  current: number
  max: number
  production: number
}

interface Building {
  id: string
  name: string
  icon: string
  level: number
  outputs: { type: string; amount: number }[]
}

interface Colony {
  id: string
  name: string
  systemName: string
  planetType: string
  atmosphere: string
  gravity: number
  temperature: number
  status: 'developing' | 'established' | 'struggling'
  population: number
  development: number
  populationGrowth: number
  happiness: number
  energyOutput: number
  resources: Resource[]
  buildings: Building[]
}

// 响应式数据
const selectedFilter = ref('all')
const sortBy = ref('name')
const selectedColony = ref<Colony | null>(null)
const activeDetailTab = ref('overview')

const detailTabs = [
  { id: 'overview', name: '概览', icon: '📊' },
  { id: 'buildings', name: '建筑', icon: '🏭' },
  { id: 'resources', name: '资源', icon: '📦' }
]

// 模拟数据
const colonies = ref<Colony[]>([
  {
    id: '1',
    name: '新地球',
    systemName: '太阳系',
    planetType: '类地行星',
    atmosphere: '氮氧混合',
    gravity: 1.0,
    temperature: 22,
    status: 'established',
    population: 1500000,
    development: 85,
    populationGrowth: 2.3,
    happiness: 78,
    energyOutput: 2500,
    resources: [
      { type: 'energy', current: 2500, max: 3000, production: 150 },
      { type: 'minerals', current: 1800, max: 2500, production: 120 },
      { type: 'food', current: 2200, max: 2800, production: 180 }
    ],
    buildings: [
      { id: '1', name: '能源站', icon: '⚡', level: 3, outputs: [{ type: 'energy', amount: 150 }] },
      { id: '2', name: '矿物精炼厂', icon: '⛏️', level: 2, outputs: [{ type: 'minerals', amount: 120 }] }
    ]
  },
  {
    id: '2',
    name: '火星前哨',
    systemName: '太阳系',
    planetType: '沙漠行星',
    atmosphere: '稀薄大气',
    gravity: 0.38,
    temperature: -63,
    status: 'developing',
    population: 250000,
    development: 45,
    populationGrowth: 1.8,
    happiness: 65,
    energyOutput: 800,
    resources: [
      { type: 'energy', current: 800, max: 1200, production: 60 },
      { type: 'minerals', current: 950, max: 1500, production: 80 },
      { type: 'food', current: 400, max: 600, production: 30 }
    ],
    buildings: [
      { id: '3', name: '太阳能阵列', icon: '☀️', level: 2, outputs: [{ type: 'energy', amount: 60 }] }
    ]
  }
])

// 计算属性
const totalColonies = computed(() => colonies.value.length)
const totalPopulation = computed(() => colonies.value.reduce((sum, colony) => sum + colony.population, 0))
const averageDevelopment = computed(() => {
  const avg = colonies.value.reduce((sum, colony) => sum + colony.development, 0) / colonies.value.length
  return Math.round(avg)
})
const totalEnergyOutput = computed(() => colonies.value.reduce((sum, colony) => sum + colony.energyOutput, 0))

const filteredColonies = computed(() => {
  let filtered = colonies.value

  // 应用过滤器
  if (selectedFilter.value !== 'all') {
    filtered = filtered.filter(colony => colony.status === selectedFilter.value)
  }

  // 应用排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'name':
        return a.name.localeCompare(b.name)
      case 'population':
        return b.population - a.population
      case 'development':
        return b.development - a.development
      case 'resources':
        return b.energyOutput - a.energyOutput
      default:
        return 0
    }
  })

  return filtered
})

// 方法
function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function getStatusIcon(status: string): string {
  const icons = {
    developing: '🚧',
    established: '✅',
    struggling: '⚠️'
  }
  return icons[status as keyof typeof icons] || '❓'
}

function getResourceIcon(type: string): string {
  const icons = {
    energy: '⚡',
    minerals: '⛏️',
    food: '🌾',
    research: '🧪',
    alloys: '🔩'
  }
  return icons[type as keyof typeof icons] || '📦'
}

function getResourceName(type: string): string {
  const names = {
    energy: '能源',
    minerals: '矿物',
    food: '食物',
    research: '研究点',
    alloys: '合金'
  }
  return names[type as keyof typeof names] || type
}

function selectColony(colony: Colony) {
  selectedColony.value = colony
}

function closeDetails() {
  selectedColony.value = null
}

function establishNewColony() {
  console.log('建立新殖民地')
}

function manageColony(colony: Colony) {
  console.log('管理殖民地:', colony.name)
}

function viewColonyDetails(colony: Colony) {
  selectColony(colony)
}
</script>

<style scoped>
.colonies-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.colonies-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.view-title {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.title-icon {
  font-size: 1.5rem;
}

.subtitle {
  margin: 0.25rem 0 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.colonies-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.view-filters {
  display: flex;
  gap: 0.75rem;
}

.filter-select,
.sort-select {
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
}

.establish-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.establish-btn:hover {
  background: var(--primary-hover);
}

.colonies-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.colonies-overview {
  margin-bottom: 2rem;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.stat-icon {
  font-size: 2rem;
  opacity: 0.8;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.colonies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.colony-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.colony-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.colony-card.selected {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.colony-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.colony-info {
  flex: 1;
}

.colony-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.colony-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.colony-type,
.colony-system {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.colony-status {
  display: flex;
  align-items: center;
}

.status-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.status-indicator.status-developing {
  background: rgba(245, 158, 11, 0.2);
}

.status-indicator.status-established {
  background: rgba(34, 197, 94, 0.2);
}

.status-indicator.status-struggling {
  background: rgba(239, 68, 68, 0.2);
}

.colony-stats {
  margin-bottom: 1rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.stat-icon {
  font-size: 1rem;
}

.stat-text {
  color: var(--text-primary);
  font-weight: 500;
}

.colony-resources {
  margin-bottom: 1rem;
}

.resource-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.resource-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.resource-progress {
  flex: 1;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.resource-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.resource-text {
  color: var(--text-secondary);
  min-width: 60px;
  text-align: right;
}

.colony-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.action-btn.primary {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.btn-icon {
  font-size: 1rem;
}

.colony-details-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.panel-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-hover);
  color: var(--error-color);
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.details-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-content {
  flex: 1;
  overflow-y: auto;
}

.tab-panel {
  padding: 1.5rem;
}

.overview-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.overview-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.info-value {
  color: var(--text-primary);
  font-weight: 500;
}

.development-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.progress-text {
  font-weight: 600;
  color: var(--primary-color);
}

.development-factors {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.factor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.factor-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.factor-value {
  font-weight: 500;
}

.factor-value.positive {
  color: var(--success-color);
}

.buildings-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.building-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.building-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.building-info {
  flex: 1;
}

.building-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.building-level {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.building-output {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.output-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
}

.output-icon {
  font-size: 0.9rem;
}

.output-value {
  color: var(--success-color);
  font-weight: 500;
}

.resources-overview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.resource-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.resource-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.resource-name {
  font-weight: 600;
  color: var(--text-primary);
}

.resource-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resource-bar-large {
  height: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  overflow: hidden;
}

.resource-numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.current {
  color: var(--text-primary);
  font-weight: 600;
}

.separator {
  color: var(--text-secondary);
}

.max {
  color: var(--text-secondary);
}

.resource-production {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.production-label {
  color: var(--text-secondary);
}

.production-value {
  color: var(--success-color);
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .colonies-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .colonies-controls {
    justify-content: space-between;
  }
  
  .colonies-grid {
    grid-template-columns: 1fr;
  }
  
  .colony-details-panel {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>